<template>
  <div id="trainingResources-ranking">
    <div class="ranking-heblcok clearfix">
      <div class="fl c-left">
        <p class="title"
          ><img src="../../../../assets/training/t3.png" />资源排行</p
        >
      </div>
      <!-- <div class="fr c-right">  更多 +  </div> -->
    </div>

    <div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <div class="t-r-list--wrap-item">
              <p class="bg-right"
                ><img src="../../../../assets/training/z1.png"
              /></p>
              <div class="wrap-item-hed">
                <p class="item-hed-title"
                  ><span class="borders"></span
                  ><span class="name">最新</span></p
                >
              </div>
              <div
                class="t-r-list--wrap-li clearfix"
                v-for="v in ranking1"
                :key="v.id"
                @click="toCourseDetail(v)"
              >
                <div class="fl l-img">
                  <img :src="coverImg(v)" class="fl" />
                </div>
                <div class="fl r-txt">
                  <p class="title two-ellipsis">{{ v.title }}</p>

                  <div class="txt-score clearfix">
                    <p class="fl txt-ico col"> 制作团队：{{ teamInfo(v) }} </p>
                  </div>
                </div>
              </div>
              <el-empty
                v-if="ranking1.length == 0"
                description="暂无数据"
              ></el-empty>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="box-card">
            <div class="t-r-list--wrap-item bm2">
              <p class="bg-right"
                ><img src="../../../../assets/training/z2.png"
              /></p>
              <div class="wrap-item-hed">
                <p class="item-hed-title"
                  ><span class="borders"></span
                  ><span class="name">热门</span></p
                >
              </div>
              <div
                class="t-r-list--wrap-li clearfix"
                v-for="v in ranking2"
                :key="v.id"
                @click="toCourseDetail(v)"
              >
                <div class="fl l-img">
                  <img :src="coverImg(v)" class="fl" />
                </div>
                <div class="fl r-txt">
                  <p class="title two-ellipsis">{{ v.title }}</p>

                  <div class="txt-score clearfix">
                    <p class="fl txt-ico col"> 制作团队：{{ teamInfo(v) }} </p>
                  </div>
                </div>
              </div>
              <el-empty
                v-if="ranking2.length == 0"
                description="暂无数据"
              ></el-empty>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="box-card">
            <div class="t-r-list--wrap-item bm3">
              <p class="bg-right"
                ><img src="../../../../assets/training/z3.png"
              /></p>
              <div class="wrap-item-hed">
                <p class="item-hed-title"
                  ><span class="borders"></span
                  ><span class="name">优选</span></p
                >
              </div>
              <div
                class="t-r-list--wrap-li clearfix"
                v-for="v in ranking3"
                :key="v.id"
                @click="toCourseDetail(v)"
              >
                <div class="fl l-img">
                  <img :src="coverImg(v)" class="fl" />
                </div>
                <div class="fl r-txt">
                  <p class="title two-ellipsis">{{ v.title }}</p>

                  <div class="txt-score clearfix">
                    <p class="fl txt-ico col"> 制作团队：{{ teamInfo(v) }} </p>
                  </div>
                </div>
              </div>
              <el-empty
                v-if="ranking3.length == 0"
                description="暂无数据"
              ></el-empty>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { openApiSysCourseQuery } from '@/api/openApi'
import setInfo from '@/mixins/setInfo.js'
export default {
  mixins: [setInfo],
  data() {
    return {
      ranking1: [],
      ranking2: [],
      ranking3: [],
    }
  },
  mounted() {
    this.getListType()
    this.getListType('clickNum')
    this.getListType('recommended')
  },
  methods: {
    getListType(type) {
      var recommended = ''
      if (type == 'recommended') {
        recommended = 1
      }
      var data = {
        page: 1,
        limit: 4,
        courseType: 6,
        status: 1,
        sortOrder: type,
        recommended: recommended,
      }

      openApiSysCourseQuery(data).then((res) => {
        if (type == 'clickNum') {
          this.ranking2 = res.data.data
        } else if (type == 'recommended') {
          this.ranking3 = res.data.data
        } else {
          this.ranking1 = res.data.data
        }
      })
    },
    toCourseDetail(row) {
      this.$router.push({
        name: 'training-detail',
        query: { courseId: row.id },
      })
    },
  },
}
</script>

<style  lang="scss" >
#trainingResources-ranking {
  position: relative;
  padding-top: 70px;
  .el-card__body {
    padding: 0px;
  }
  .ranking-heblcok {
    margin-bottom: 40px;

    .c-left {
      font-size: 30px;
      font-weight: 900;
      color: #000;
      img {
        vertical-align: -6px;
        padding-right: 10px;
      }
    }
    .c-right {
      border-left: 1px solid #666666;
      padding-left: 10px;
      color: #000;
      cursor: pointer;
      margin-top: 10px;
      font-size: 16px;
    }
  }
  .wrap-item-hed {
    .item-hed-title {
      margin-bottom: 30px;
      .borders {
        display: inline-block;
        width: 5px;
        height: 20px;
        background: #de1111;
        margin-top: 4px;
        margin-right: 10px;
      }
      .name {
        font-size: 20px;
        font-weight: 900;
      }
    }
  }
  .t-r-list--wrap-li.clearfix {
    margin-bottom: 20px;
  }
  .t-r-list--wrap-item {
    height: 510px;
    padding: 30px;
    border-bottom: 5px solid #dd2a2a;
    position: relative;

    cursor: pointer;
    .bg-right {
      position: absolute;
      right: 0;
      top: 0;
    }
    .l-img {
      width: 140px;
      height: 95px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        display: inherit;
      }
      .comment-num {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 10px 25px;
        background: #282b30;
        color: #fff;
        i {
          font-size: 16px;
          padding-right: 5px;
        }
      }
    }
    .r-txt {
      background: #fff;
      width: 225px;
      padding: 10px 0 10px 20px;
      font-size: 15px;
      .title {
        padding-bottom: 15px;

        font-size: 16px;
      }
      .col {
        color: #8c8c8c;
      }
    }
    @media screen and (max-width: 1400px) {
      .r-txt {
        width: 180px;
      }
      .l-img {
        width: 100px;
        height: 80px;
      }
    }
  }
  .bm2 {
    border-bottom: 5px solid #ffb100;
  }
  .bm3 {
    border-bottom: 5px solid #0b86d3;
  }
  .el-row {
    margin-bottom: 30px;
  }
}
</style>
